<template>
	<view class="c_container">
		<view class="c_header">
			<image class="mh_img" src="/static/images/background.png"></image>
		</view>
		<view class="in_boxs">
			<view class="input_box">
				<text class="ip_txt">消费记录</text>
			</view>
			<view class="recode_top">
				<view class="recode_top_left recode_top_item">
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date1" @change="bindDateChange1">
							<view class="uni-input" style="color: #169BD5;display: flex;justify-content: center;align-items: center;">{{date1}}</view>
						</picker>
					</view>
				</view>
				<text class="recode_top_center">至</text>
				<view class="recode_top_right recode_top_item">
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date" @change="bindDateChange">
							<view class="uni-input" style="color: #169BD5;display: flex;justify-content: center;align-items: center;">{{date}}</view>
						</picker>
					</view>
				</view>
			</view>
			<view>
				<view class="txtCon" v-if="recodeList.length == 0">
					<text class="scroll_title">暂无数据</text>
				</view>
				<view style="position: absolute; top: 200rpx;width: 100%;" v-else>
					<scroll-view :scroll-top="scrollTop"  :style="{height: height}" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
					@scroll="scroll">
						<view id="demo1" v-for="(item, index) in recodeList" v-bind:key="index" class="scroll-view-item">
							<view class="scroll_top">
								<text class="scroll_title">{{item.mealName}}</text>
								<text class="scroll_time">{{item.cardNo}}</text>
							</view>
							<text class="fafang">{{item.payChannelName}}</text>
							<view class="scroll_bottom">
								<text class="amount">{{item.amount.toFixed(2)}}</text>
								<text class="scroll_time">{{item.billTime}}</text>
							</view>
						</view>
						<view style="height: 50rpx;display: flex;justify-content: center;align-items: center;">
							<text class="scroll_time">没有更多数据啦~</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {queryStudentSTConsume} from '../../common/api/index.js'
	export default {
		onShow:function(){
			let _that = this;
			uni.getSystemInfo({
				success: function (res) {
					_that.height = res.windowHeight - 150 + 'px';
				}
			})
			this._queryStudentSTConsume()
		},
		onLoad:function(option){
			this.empId = option.empId
			this.orgId = option.orgId
		},
		data() {
			const currentDate = this.getDate({
			    format: true
			})
			const currentDate1 = this.getDate1({
			    format: true
			})
			return {
				orgId: '',
				empId: '',
				date: currentDate,
				date1: currentDate1,
				scrollTop: 0,
				recodeList: [],
				height: 0
			}
		},
		methods: {
			upper() {
				
			},
			lower() {
				
			},
			scroll() {
				
			},
			_queryStudentSTConsume() {
				uni.showLoading({
					title: '加载中...'
				})
				let s_userId = uni.getStorageSync('s_userId')
				queryStudentSTConsume({
					userId: s_userId,
					orgId: this.orgId,
					empId: this.empId,
					startDate: this.date1,
					endDate: this.date,
					currentPage: 1,
					pageSize: 50
				}).then(res => {
					if(res.code == 0) {
						this.recodeList = res.data.rows
						uni.hideLoading()
					}
				}).catch(err => {
					console.log(err)
					uni.hideLoading()
				})
			},
			bindDateChange1(e) {
				this.date1 = e.target.value
				this.date1 = this.date1.toString().replace(/\//g, "-")
				this._queryStudentSTConsume()
			},
			bindDateChange(e) {
				this.date = e.target.value
				this.date = this.date.toString().replace(/\//g, "-")
				this._queryStudentSTConsume()
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
				
			    month = month > 9 ? month : '0' + month;;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			getDate1(type) {
			    const date = new Date();
				date.setMonth(date.getMonth()-1);
			    let year = date.getFullYear();
			    let month = date.getMonth();
			    let day = date.getDate();
				
			    month = month > 9 ? month : '0' + month;;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	.c_container {
		height: 100%;
		background-color: #007AFF;
		overflow: hidden;
	}
	.c_header {
		width: 100%;
		height: 220rpx;
		background-color: #007AFF;
	}
	.scroll-view-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.recode_top_item {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
	}
	.scroll_top {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		line-height: 40rpx;
	}
	.txtCon {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}
	.scroll_bottom {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		line-height: 40rpx;
	}
	#demo1 {
		padding: 20rpx;
		border-bottom: 1px solid rgba(242, 242, 242, 1);
	}
	.scroll_time {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-size: 24rpx;
		color: #AAAAAA;
	}
	.amount {
		font-family: 'PingFangSC';
		font-weight: 500;
		font-size: 28rpx;
		color: rgba(225, 15, 15, 1);
	}
	.balance {
		font-family: 'PingFangSC';
		font-weight: 500;
		font-size: 28rpx;
		color: rgb(16, 16, 16);
	}
	.mh_img {
		width: 100%;
		height: 100%;
	}
	.b_line {
		width: 100%;
		height: 15rpx;
		background-color: #DDDDDD;
	}
	.fafang {
		font-family: 'PingFangSC';
		font-weight: 500;
		font-size: 28rpx;
		color: rgb(16, 16, 16);
	}
	.in_boxs {
		width: 95%;
		height: calc(100% - 160rpx);
		border-radius: 16rpx 16rpx 0px 0px;
		/* padding: 70rpx 50rpx; */
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #FFFFFF;
		position: absolute;
		top: 140rpx;
		left: 20rpx;
		overflow: hidden;
	}
	.input_box {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.ip_txt {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 28rpx;
		color: rgb(16, 16, 16);
		padding: 20rpx 0;
	}
	.recode_top {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid rgba(242, 242, 242, 1);
	}
	.recode_top_center {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}
	.scroll_title {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}
	.scroll_moeny {
		font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
		font-weight: 700;
		font-size: 28rpx;
		color: #555555;
	}
</style>
